<template>
  <view
    v-if="now"
    class="weather"
  >
    <view class="weather-header">
      <view class="weather-header__icon">
        <scale-image :src="now.thumb" />
      </view>
      <view class="weather-header__temp">
        {{now.temp}}
      </view>
      <view class="weather-header__extra">
        <text class="weather-header__symbol">°C</text>
        <text class="weather-header__time">{{now.time}}</text>
      </view>
    </view>
    <view class="weather-body">
      <view>{{now.text}}</view>
      <view v-if="tempRange">{{tempRange}}</view>
      <view v-if="now.windText">{{now.windText}}</view>
      <view v-else-if="now.humidity">空气湿度{{now.humidity}}</view>
    </view>
  </view>
</template>

<script>
import ScaleImage from '@/components/scaleImage'
export default {
  name: 'Weather',
  components: {
    ScaleImage
  },
  props: {
    location: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      host: 'https://devapi.qweather.com/v7/weather/',
      // host: 'https://free-api.heweather.net/s6/weather/',
      key: '104051ad798f43dba6ecf77f85d9d109',
      now: null,
      daily: [],
      windLevels: [
        { level: 0, text: '无风', min: 0, max: 0.2 },
        { level: 1, text: '软风', min: 0.3, max: 1.5 },
        { level: 2, text: '轻风', min: 1.6, max: 3.3 },
        { level: 3, text: '微风', min: 3.4, max: 5.4 },
        { level: 4, text: '和风', min: 5.5, max: 7.9 },
        { level: 5, text: '清劲风', min: 8.0, max: 10.7 },
        { level: 6, text: '强风', min: 10.8, max: 13.8 },
        { level: 7, text: '疾风', min: 13.9, max: 17.1 },
        { level: 8, text: '大风', min: 17.2, max: 20.7 },
        { level: 9, text: '烈风', min: 20.8, max: 24.4 },
        { level: 10, text: '狂风', min: 24.5, max: 28.4 },
        { level: 11, text: '暴风', min: 28.5, max: 32.6 },
        { level: 12, text: '飓风', min: 32.7, max: 36.9 },
        { level: 13, text: '', min: 37, max: 41 },
        { level: 14, text: '', min: 42, max: 45 },
        { level: 15, text: '', min: 46, max: 51 },
        { level: 16, text: '', min: 52, max: 59 },
        { level: 17, text: '', min: 60, max: 61.2 },
        { level: 18, text: '', min: 61.2, max: 100 }
      ]
    }
  },
  computed: {
    tempRange () {
      console.log(this.daily)
      if (this.daily.length > 0) {
        const today = this.daily[0]
        return today.tempMin + '°C ~ ' + today.tempMax + '°C'
      } else {
        return ''
      }
    }
  },
  created () {
    this.getWeather(this.location)
    this.getDays(this.location)
  },
  methods: {
    getWeather (city) {
      wx.request({
        url: this.host + 'now',
        data: {
          key: this.key,
          location: this.location
        },
        method: 'GET',
        success: (res) => {
          const data = res.data
          console.log(data)
          if (data.code !== '200') {
            wx.showToast({
              title: '抱歉！没有该城市的天气预报',
              icon: 'none',
              duration: 2000
            })
            return
          }
          const weatherData = data.now
          this.now = {
            time: this.$moment(weatherData.obsTime).format('HH:mm'),
            // thumb: `https://moyv.top/wechat/images/weather/${weatherData.icon}.png`,
            thumb: `/static/icons/weather/${weatherData.icon}.png`,
            temp: weatherData.temp,
            text: weatherData.text,
            windText: this.formatWind(
              weatherData.windDir,
              weatherData.windSpeed
            ),
            humidity: weatherData.humidity + '%'
          }
        }
      })
    },
    getDays (city) {
      wx.request({
        url: this.host + '3d',
        data: {
          key: this.key,
          location: this.location
        },
        method: 'GET',
        success: (res) => {
          const data = res.data
          if (data.code !== '200') {
            return
          }
          this.daily = data.daily
        }
      })
    },
    formatWind (str, speed) {
      let text = [str]
      let level = this.windLevels.find(
        (v) => speed >= v.min * 3.6 && speed < v.max * 3.6
      )
      if (level) {
        text.push(level.text)
      }
      return text.join('')
    }
  }
}
</script>

<style lang="less">
.weather {
  padding: 10px;
  text-align: center;
  &-header {
    display: flex;
    justify-content: space-around;
    &__icon {
      flex: 1;
      display: flex;
      align-items: center;
      -webkit-animation-name: fadeInOut;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-duration: 12s;
      -webkit-animation-direction: alternate;
    }
    &__temp {
      flex: 1;
      font-size: 50px;
      line-height: 1;
    }
    &__extra {
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;
    }
    &__symbol {
      font-size: 16px;
      color: #ff6600;
    }
    &__time {
      color: #cdcdcd;
    }
  }
  &-body {
    padding-top: 8px;
    font-size: 12px;
    opacity: 0.9;
    view {
      line-height: 18px;
    }
  }
}
</style>
